<template>
	<base-page title="待支付" show-border backgroundColor="white">
		<view v-if="detail">
			<view v-if="counterTime !== 0" class="p-16 flex justify-between">
				<view class="flex-col">
					<text class="fs-24 text-bold">待支付</text>
					<text class="mt-4 fs-12 text-color-hint">请在<text class="color-primary text-bold">{{counterTime}}</text>内完成支付</text>
				</view>
				<image style="height:51px;width:72px;" src="@/pagesA/static/image/img-wait-pay.png"></image>
			</view>
			<view v-else class="p-16 flex">
				<view><text class="fs-24 text-bold">支付超时已关闭</text></view>
			</view>
			<view class="h-13 bg-default"></view>
			<view class="p-16">
				<view class="flex">
					<image class="radius-8 mr-12 flex-shrink" mode="aspectFill" style="width:88px;height:88px;" :src="coverPicture"></image>
					<view class="flex-1 w-0">
						<text class="text-bold">{{detail.activeTitle}}</text>
						<view class="mt-4 h-17 flex item-center text-color-hint fs-12">
							<text>数量 x{{detail.orderNum}}</text>
						</view>
					</view>
				</view>
				<view class="mt-16 h-17 flex justify-between item-center text-color-hint fs-12">
					<text>商品金额</text>
					<text>￥{{numberFormat(detail.orderPrice)}}</text>
				</view>
				<view class="h-1 bg-default my-16"></view>
				<view class="flex justify-end" style="align-items:baseline;">
					<text class="fs-12">实际支付:</text>
					<text class="fs-16 text-bold color-primary">￥{{numberFormat(detail.payPrice)}}</text>
				</view>
			</view>
			<view class="h-13 bg-default"></view>
			<template v-if="isSignUp && detail.orderEnrollInfos && detail.orderEnrollInfos.length">
				<view class="p-16 fs-16 text-bold leading-22">
					<text>报名信息</text>
				</view>
				<view class="h-1 bg-default"></view>
				<view v-for="(item,i) in detail.orderEnrollInfos" :key="i" class="mt-16 mb-12 px-16 fs-12 h-17 flex item-center">
					<text class="text-color-hint">{{item.title}}：</text>
					<text>{{item.value}}</text>
				</view>
				<view class="mt-16 h-13 bg-default"></view>
			</template>
			<view class="p-16 fs-16 text-bold leading-22">
				<text>订单信息</text>
			</view>
			<view class="h-1 bg-default"></view>
			<view class="p-16">
				<view class="fs-12 h-17 flex item-center">
					<text class="text-color-hint">订单编号：</text>
					<text>{{detail.orderNo}}</text>
				</view>
				<view class="mt-16 fs-12 h-17 flex item-center">
					<text class="text-color-hint">下单时间：</text>
					<text>{{detail.orderTime}}</text>
				</view>
				<view class="mt-16 fs-12 h-17 flex item-center">
					<text class="text-color-hint">订单总额：</text>
					<text class="color-primary">￥{{numberFormat(detail.orderPrice)}}</text>
				</view>
				<view v-if="detail.discountAmt || detail.redPacketAmt" class="mt-16 fs-12 h-17 flex item-center">
					<text class="text-color-hint">优惠金额：</text>
					<text>￥{{numberFormat(detail.discountAmt || detail.redPacketAmt)}}</text>
				</view>
			</view>
		</view>

		<template #footer>
			<view v-if="detail && counterTime !== 0" class="text-white flex-col center bg-primary" style="height:56px;" @click="toPay">
				<view class="font-bold h-22 leading-22">
					<text>¥</text>
					<text class="fs-20">{{numberFormat(detail.payPrice)}}</text>
				</view>
				<view class="fs-16 h-22 leading-22">
					<text>立即支付</text>
				</view>
			</view>
		</template>
	</base-page>
</template>

<script setup name="WaitPay">
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, computed, onUnmounted } from 'vue'
	import { buyOrderDetailApi, orderPayApi, systemCancelPayApi, queryOrderPay } from '@/api/order.js'
	import { useActivity } from '@/hooks/useActivity.js'
	import { useOrder } from '@/hooks/useOrder.js'
	import { numberFormat } from '@/utils/index.js'

	const orderNo = ref('')
	const orderId = ref('')
	const detail = ref(null)

	const { isSignUp, coverPicture, updateOrderInfo, remainPayTime } = useOrder(detail)

	const timer = ref(null)
	const counterTime = ref('')
	const counter = () => {
		clearTimer()
		timer.value = setTimeout(() => {
			counterTime.value = remainPayTime()
			if (counterTime.value) {
				counter()
			} else {
				clearTimer()
				systemCancelPay()
			}
		}, 1000)
	}

	const clearTimer = () => {
		if (timer.value) {
			clearTimeout(timer.value)
			timer.value = null
		}
	}

	// 倒计时结束，取消支付
	const systemCancelPay = () => {
		systemCancelPayApi({
			orderNo: detail.value.orderNo
		}).then(res => {
			console.log('', res)
		})
	}

	const toPay = async () => {
		const res = await orderPayApi({
			orderNo: detail.value.orderNo
		})
		// console.log('支付', res.orderNo)
		const orderInfo = JSON.parse(res.orderNo)
		uni.requestPayment({
			provider: 'wxpay',
			...orderInfo,
			success() {
				clearTimer()
				queryOrderPay({
					orderNo: detail.value.orderNo
				}).then((res) => {
					console.log('查单结果', res)
				}).finally(() => {
					uni.navigateTo({
						url: '/pages/home/home?tab=1',
						success: (res) => {
							if (isSignUp.value) {
								uni.$emit('signUpSuccess', {
									orderId: orderId.value,
									orderNo: detail.value.orderNo
								})
							}
						}
					})
				})
			},
			fail(e) {
				console.log('微信支付失败', e)
				if (e.errMsg === 'requestPayment:fail cancel') {
					// 取消支付
					queryOrderPay({
						orderNo: detail.value.orderNo
					}).then((res) => {
						console.log('查单结果', res)
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: e.errMsg
					})
				}
			}
		})
	}

	const getOrderDetail = () => {
		if (orderId.value) {
			buyOrderDetailApi({
				id: orderId.value
			}).then(res => {
				detail.value = res
				updateOrderInfo(res)
				counter()
			})
		} else if (orderNo.value) {
			buyOrderDetailApi({
				orderNo: orderNo.value
			}).then(res => {
				detail.value = res
				updateOrderInfo(res)
				counter()
			})
		}
	}

	onLoad((options) => {
		orderId.value = options.id
		orderNo.value = options.orderNo
		getOrderDetail()
	})

	onUnmounted(() => {
		clearTimer()
	})
</script>
